<!-- 渐变3D饼图样式-->
<template>
    <div style="height: 100%; margin-top: 100px;" class="higBox">
      <div :id="id" style="height: 100%"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
  
let chart = {};
export default {
  name: "",
  props: {
    id: {
      type: String,
      required: true,
    },
    titileArr: {
      type: Array,
      default: ['系列一', '系列二', '系列三','系列四', '系列五', '系列六'],
    },
    dataList: {
      type: Array,
      default: [
        {
            value: 2.2,
        }, 
        {
            value: 2.1,
        }, 
        {
            value: 2.5,
        },
        {
            value: 3.2,
        },
        {
            value: 3.1,
        },
        {
            value: 4.8,
        },
      ]
    },
    dataList2: {
      default: [{
          value: 3.3,
        }, {
            value: 3.7,
        }, {
            value: 3.9,
        },{
            value: 3.2,
        },
        {
            value: 4.1,
        },
        {
            value: 5.8,
        }
      ]
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    let { id, titileArr, dataList, dataList2 } = this
    let mCharts = echarts.init(document.querySelector(`#${id}`))
    let option = {
        xAxis: {
          data: titileArr,
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 18,
            color: '#fff'
          }
        },
        yAxis: {
          show: false,
          splitLine: {
            show: true
          }
        },
        // legend: {
        //     data: ['基金支出', '基金收入']
        // },
        animationDurationUpdate: 500,
        series: [{
            type: 'pictorialBar',
            name: '基金支出',
            symbol: 'triangle',
            symbolSize: ['50%', '100%'],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#159AFF'
                }, {
                  offset: 1,
                  color: '#003AFF'
                }])
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  'color': '#FFFFFF',
                  fontSize: 18
                }
              }
            },
            data: dataList
        }, {
            type: 'pictorialBar',
            name: '基金收入',
            symbol: 'triangle',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  'color': '#fff',
                  fontSize: 18
                }
              }
            },
            symbolSize: ['50%', '100%'],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#66E1DF'
                }, {
                  offset: 1,
                  color: '#005954'
                }])
              }
            },
            barGap: '-60%', // Make series be overlap
            data: dataList2
        }]
    };

    mCharts.setOption(option)
  },
  created() {
  },
  methods: {
  },
};
</script>
   
<style lang='less' scoped>
  .higBox{
    position: relative;
    z-index: 2;
    transform: scale(.9);
  }
</style>